
<template>
	<div class="index">

		<div class="cons" v-loading="loading">
      <div style="margin: 20px;">
        <el-button type="primary" round @click="log = true">发布通知</el-button>
      </div>
		  <div class="list"
		    style=" display: flex; justify-content: space-between; background: #EAEAEA; padding: 15px 0;">
		    <div class="td" style="flex: 6; padding-left: 30px;">消息</div>
		    <div class="td" style="flex: 1; left: -20px; position: relative;">发布人</div>
		    <div class="td" style="flex: 1.5;">发布时间</div>
		  </div>
		  <el-collapse accordion @change="handleChange">
		    <el-collapse-item v-for="item in list" :key="item.nu_id" :name="item.nu_id"
		      v-bind:class="[item.status == 1 ? 'act' : 'no']">
		      <template slot="title">
		        <div class="td" style="flex: 6;">
		          <span>【{{item.type_name}}】</span><span>{{item.title}}</span>
		        </div>
		        <div class="td" style="flex: 1;">{{item.name}}</div>
		        <div class="td" style="flex: 1.5;">{{item.n_time}}</div>
		      </template>
		      <div v-if="item.content != ''" v-html="item.content"></div>
		      <div v-if="item.content == ''" v-html="item.title"></div>
		    </el-collapse-item>
		  </el-collapse>

		  <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye"
		    :page-size="pagesize" :total="total"></el-pagination>
		</div>

    <el-dialog title="发布消息" center :close-on-click-modal="false" :visible.sync="log" @opened="logshow" width="800px">
      <div>
        <div class="flex">
          <div class="f1">通知类型：</div>
          <div class="f2">
            <el-select v-model="tongzhi.type" placeholder="请选择通知类型:">
              <el-option label="重要消息(弹窗)" value="1"></el-option>
              <el-option label="普通消息" value="2"></el-option>
            </el-select>
          </div>
        </div>
        <div class="flex">
          <div class="f1">选择商品：</div>
          <div class="f2">
            <el-select v-model="tongzhi.order_page_id" filterable clearable placeholder="请选择商品">
              <el-option v-for="item in allprolist" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div style="margin-left: 20px; color:#666;">设置商品后将只发送给对该商品可见的商户</div>
        </div>
        <div class="flex">
          <div class="f1">用户分组：</div>
          <div class="f2">
            <el-select v-model="tongzhi.group_id" clearable placeholder="请用户分组">
              <el-option v-for="(item,index) in fzlist" :key="index" :label="item.title" :value="item.id" ></el-option>
            </el-select>
          </div>
        </div>

        <div class="flex">
          <div class="f1">通知标题：</div>
          <div class="f2">
            <el-input v-model="tongzhi.title" style="width: 400px;" maxlength="50" placeholder="通知标题"></el-input>
          </div>
        </div>
        <div class="flex">
          <div class="f1">通知内容：</div>
          <div class="f2">
            <div ref="editorE" style="width: 600px;">

            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" round @click="log = false">取 消</el-button>
        <el-button type="primary" round @click="fabutongzhi">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import bus from '@/assets/bus.js'
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import E from 'wangeditor'
  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot
    },
    name: 'fabutongzhi',
    data() {
      return {
        tongzhi: {
          type: "2",
          title: "",
          content: "",
          order_page_id: "",
          group_id:''
        },
        list: {},
        total: 0,
        pagesize: 20,
        page: 1,
        loading: true,
        log: false,
        editor: "",
        shopid: "",
        allprolist: "",
        fzlist:[],
      }
    },
    created() {
      this.getlist()
      bus.$on('shopid', (res) => {
        this.shopid = res
      })
      //获取所有产品
      axios.get("/api/gth/order-pages?_page_size=1000")
        .then(response => {
          if (response.data.msg.code == 0) {
            this.allprolist = response.data.data.data
          }
        })
        //分组列表
			  this.getfzlist()
    },
    mounted() {

    },
    methods: {
      down: function(url) {
        const a = document.createElement('a');
        a.setAttribute('download', "");
        a.setAttribute('href', url);
        a.click();
      },
      handleChange: function(e) {
        axios.post('/api/sys/notice/set/read', {
            id: e
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      fabutongzhi: function() {
        axios.post('/api/system/notice/create', {
            type: this.tongzhi.type,
            title: this.tongzhi.title,
            content: this.tongzhi.content,
            order_page_id: this.tongzhi.order_page_id,
            group_id:this.tongzhi.group_id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('通知已发布！');
              this.tongzhi = {
                  type: "1",
                  title: "",
                  content: ""
                },

                this.editor.txt.clear()
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

      },
      logshow: function() {
        this.log = true
        if (this.editor == "") {
          var that = this
          this.editor = new E(this.$refs.editorE);

          this.editor.customConfig.menus = [
            'fontSize',
            'link',
            'image',
            'foreColor'
          ]
          this.editor.customConfig.uploadImgServer = '/upload'
          this.editor.customConfig.showLinkImg = false
          this.editor.customConfig.onchange = function(html) {
            that.tongzhi.content = html
          }
          this.editor.customConfig.customUploadImg = function(files, insert) {
            var formData = new FormData();
            formData.append("pic", files[0]);
            axios.post('/api/plan-market/order-page/upload-pic', formData)
              .then(response => {
                if (response.data.msg.code == 0) {
                  insert(response.data.data)
                } else {
                  that.$message.error(response.data.msg.info);
                }
              })
          }
          this.editor.create();
        }

      },
      getlist: function() {
        this.danxuans = [];
        this.quanxuana = false
        var that = this
        axios.get('/api/system/notice/list?page=' + this.page + '&page_size=' + this.pagesize)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list = response.data.data.data
              that.total = response.data.data.total
              that.loading = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getlist()
      },
      status: function(id) {
        var that = this
        axios.post('/api/system/message/status', {
            status: 2,
            id: id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message({
                message: '修改状态成功！',
                type: 'success'
              });
              that.getlist()
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //分组列表
			getfzlist(){
				axios.get('/api/plan-market/reseller/group/list')
					.then(response => {
						if(response.data.msg.code == 0){

							this.fzlist = response.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
    }
  }
</script>

<style lang="scss" scoped>
  .index {

    /deep/ .el-button--primary {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }

    /deep/ .el-collapse-item__header{ height: auto !important;}

    .cons {
      /deep/ .el-collapse-item__content {
        background: #f1f1f1;
        padding: 10px 20px;
      }
    }

    .flex {
      display: flex;

      .f1 {
        flex-basis: 100px;
        line-height: 36px;
        text-align: right;
        margin-right: 10px;
        margin-bottom: 20px;
      }
    }


    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #EFEFEF
    }

    .cons {
      background: #fff;
      padding: 0 20px;

      /deep/ .el-pagination {
        text-align: right;
        margin: 20px 0
      }

      .act {
        color: #000;

        /deep/ .el-icon-message-solid {
          color: #EEF7FF
        }
      }

      .no {
        color: #999;
      }
    }

  }
</style>
